<template>
	<view class="b_width hui">
		<view class="b_flex_c head_box">
			<view class="b_f_w">购物车</view>
			<view class="num" v-if="total">{{total}}件商品</view>
			<view class="del" @click="del">删除</view>
		</view>
		<view class="h_tc"></view>
		<view class="list_box">
			<u-checkbox-group v-model="check" placement="column" size="25" @change="getPrice" activeColor='#FF7133'>


				<view class="info_box b_flex_c" v-for="(item,index) in list" :key="index">
					<u-checkbox shape="circle" :key="index" label=" " :name="index">
					</u-checkbox>
					<image :src="item.image" class="img"></image>
					<view class="right">
						<view>{{item.storeName}}</view>
						<view class="pbox">¥ {{item.price}}<text class="unit"
								v-if="item.unitName">/{{item.unitName}}</text></view>
						<view class="num_box">
							<u-number-box min="1" :name="item.id" v-model="item.cartNum"
								@change='setNum'></u-number-box>
						</view>

					</view>
				</view>
			</u-checkbox-group>
		</view>
		<view :class="['bottom_box','b_flex_c_s',system=='ios'?'pm':'']">
			<u-checkbox-group v-model="checks" size="25" placement="column" @change="checkboxChange"
				activeColor='#FF7133'>
				<u-checkbox shape="circle" label="全选" :name="1"></u-checkbox>
			</u-checkbox-group>

			<view><text class="hj">合计:</text><text class="price">¥ {{price}}</text></view>
			<view :class="['btn',check.length>0?'btn_c':'']" @click="submit">去结算</view>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue";
	import {
		carList,
		carEdit,
		carDel,
		yOrder
	} from "@/require/api.js";
	export default {
		components: {
			empty
		},
		data() {
			return {
				params: {
					page: 1,
					limit: 99999,
					isValid: true
				},
				list: [],
				emptyShow: false,
				total: '',
				check: [],
				checks: [],
				system: '',
				price: 0
			}
		},
		onLoad() {
			this.system = uni.getSystemInfoSync().platform;
		},
		onShow() {

			this.getList();
		},
		methods: {
			async submit(){
			  if(this.check.length>0){
				  let ids=this.getIds().split(',');
				  let param=[];
				  ids.forEach(res=>{
					  param.push({
						  shoppingCartId:res
					  });
				  });
				  let {code,data,message}= await yOrder({preOrderType:'shoppingCart',orderDetails:param});
				  if(code==200){
					  this.$project.toPath('/pages/shop/order?preOrderNo='+data.preOrderNo);
				  }
				
			  }	
			},
			getIds(){
				let ids=[];
				this.check.forEach(res=>{
					ids.push(this.list[res].id);
				});
				return ids.join(',');
			},
			del() {
				
				let _=this;
				if(this.check.length<1){
					return this.$project.toast('没有选中的商品');
				}
				let ids=_.getIds();
				uni.showModal({
					title: '确认是否删除选中商品?',
					success(res) {
						if (res.confirm) {
							
							carDel({ids:ids}).then(res=>{
								if(res.code==200){
									_.$project.toast(res.message);
									_.getList();
								}
							});
							
						}
					}
				});
			},
			checkboxChange(e) {

				if (e.length > 0) {
					let indexs = [];
					let num = 0;
					this.list.forEach((res, index) => {
						indexs.push(index);
						num += Number(res.price) * res.cartNum
					});

					this.check = indexs;
					this.price = num;
				} else {
					this.check = [];
					this.price = 0;
				}

			},
			getPrice(e) {

				let num = 0;
				console.log(e);
				e.forEach(res => {
					let item = this.list[res];
					num += Number(item.price) * item.cartNum
				});

				if (this.total == e.length) {
					this.checks = [1];
				} else {
					this.checks = [];
				}

				this.price = num;
			},
			async setNum(e) {
				console.log(e);
				await carEdit({
					id: e.name,
					number: e.value
				});

			},
			async getList() {
				this.params.page = 1;
				let {
					data
				} = await carList(this.params);
				if (data.list.length < 1 || !data.list) {
					this.emptyShow = true;
				} else {
					this.emptyShow = false;
				}
				this.list = data.list;
				this.total = data.total;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head_box {
		box-sizing: border-box;
		padding: 20rpx;
		background-color: white;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;

	}

	.num {
		font-size: 26rpx;
		color: #999;
		margin-left: 20rpx;
	}

	.del {
		font-size: 28rpx;
		color: #999;
		margin-left: auto;
	}

	.h_tc {
		height: 82rpx;
	}

	.list_box {
		box-sizing: border-box;
		padding: 30rpx;
	}

	.info_box {
		background-color: white;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}

	.img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 25rpx;
		margin-left: 15rpx;
		margin-right: 20rpx;
	}

	.right {
		width: 57%;
		font-size: 26rpx;
	}

	.pbox {
		color: #F01D1D;
		margin: 20rpx 0;
	}

	.num_box {
		display: flex;
		justify-content: flex-end;
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: white;
		box-sizing: border-box;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.pm {
		padding-bottom: 50rpx;
	}

	.btn {
		background-color: #eee;
		color: #999;
		box-sizing: border-box;
		padding: 15rpx 40rpx;
		border-radius: 36rpx;
	}

	.btn_c {
		background-color: #FF7133;
		color: white;
	}

	.hj {
		font-size: 26rpx;
		color: #999;
		margin-right: 20rpx;
	}

	.price {
		color: #F01D1D;
		font-size: 36rpx;
	}
</style>